<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .water {
            width: 1200px;
            height: 600px;
            background-color: #00f;
            position: relative;
            overflow: hidden;
        }

        .fish02 {
            width: 251px;
            height: 106px;
            position: absolute;
            top: 200px;
            left: -250px;
            background-image: url(https://oss.9ihub.com/test/shark2.png);
            background-size: 255px 1620px;
            background-repeat: no-repeat;
            animation: fish02 3s steps(1) infinite, move02 4s linear infinite;
        }

        @keyframes fish02 {

            0% {
                background-position: -4px -17px;
            }

            12.5% {
                background-position: -6px -152px;
            }

            25% {
                background-position: -16px -287px;
            }

            37.5% {
                background-position: -13px -422px;
            }

            50% {
                background-position: -6px -557px;
            }

            62.5% {
                background-position: -3px -692px;
            }

            75% {
                background-position: -7px -828px;
            }

            87.5% {
                background-position: -6px -963px;
            }

            100% {
                background-position: -11px -1108px;
            }

        }

        @keyframes move02 {
            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(1450px, 0);
            }

        }

        .fish01 {
            width: 86px;
            height: 62px;
            margin: 30px;
            background-image: url(https://oss.9ihub.com/test/fish.png);
            z-index: 1000;
            position: absolute;
            background-size: 87px 756px;
            background-repeat: no-repeat;
            animation: fish01 3s steps(1) infinite, move01 4s linear infinite;
        }



        @keyframes fish01 {
            0% {
                background-position: -1px 0;
            }

            9.1% {
                background-position: -1px -63px;
            }

            18.2% {
                background-position: -1px -127px;
            }

            27.3% {
                background-position: -1px -191px;
            }

            36.4% {
                background-position: -1px -253px;
            }

            45.5% {
                background-position: -1px -316px;
            }

            54.6% {
                background-position: -1px -378px;
            }

            63.7% {
                background-position: -1px -441px;
            }

            72.8% {
                background-position: -2px -505px;
            }

            81.9% {
                background-position: -3px -567px;
            }

            91% {
                background-position: -3px -630px;
            }

            100% {
                background-position: -3px -693px;
            }
        }

        @keyframes move01 {
            0% {
                transform: translate(0, 0);
            }

            25% {
                transform: translate(400px, 0px) rotate(90deg);
            }

            50% {
                transform: translate(400px, 300px) rotate(180deg);
            }

            75% {
                transform: translate(0px, 300px) rotate(270deg);
            }

            100% {
                transform: translate(0, 0) rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="water">
        <div class="fish01"></div>
        <div class="fish02"></div>
    </div>
</body>

</html>